<template>
    <div class="taskOrder-wrapper">
        <IHeader class="header" back="true" title="任务订单"></IHeader>
        <!--<div class="tab-wrapper border-bottom-ebebeb">-->
            <!--<div class="tab-item-wrapper" :class="[index === 0 ? 'first-child' : '']" v-for="(item, index) in tabList" :key="index" @click="handleChooseType(index)">-->
                <!--<text class="tab-item" :class="[typeIndex === index ? 'choose' : 'unchoose']">{{item.name}}</text>-->
            <!--</div>-->
        <!--</div>-->
        <div class="taskstatus-wrapper flex_row border-bottom-ebebeb">
            <text class="status-item" @click="handleChangeStatus(index)" :class="[taskType === index ? 'col_464646 font_bold' : 'col_868686']" v-for="(item, index) in statusList" :key="index">{{item}}</text>
        </div>
        <list class="itemList" v-if="itemList.length > 0" @loadmore="loadMore">
            <cell class="itemCell flex_row border-bottom-ebebeb" v-for="(item, index) in itemList" :key="index" @click="handleCheckDetail(item)">
                <div class="manage-content flex_row">
                    <image class="itemIcon" :src="imgPath(iconList[Number(item.serviceType) - 1])"></image>
                    <div class="item-content">
                        <div class="title-wrapper flex_row">
                            <text class="title">{{item.title}}</text>
                            <text class="type" v-if="!editing">{{handleFilterType(item.serviceType)}}</text>
                        </div>
                        <div class="item-center flex_row">
                            <div class="description-wrapper flex_row">
                                <text class="description" v-if="item.descriptionInformation">描述信息</text>
                                <text class="description" v-if="item.descriptionInformation">{{item.descriptionInformation}}</text>
                            </div>
                            <div class="status-wrapper" v-if="!editing">
                                <text class="status text_right">{{allStatusList[Number(item.taskStatus) - 1]}}</text>
                                <text class="time text_right" v-if="item.taskStatus === '1'">{{filterTime(item.taskValidity)}}</text>
                            </div>
                        </div>
                        <div class="date-wrapper flex_row">
                            <text class="date">{{item.createTime}} 发布</text>
                            <div class="btn-wrapper flex_row" v-if="!editing">
                                <!--<text class="btn btn-white">撤销</text>-->
                                <text v-if="item.taskStatus !== '5'" class="btn margin_left_16 btn-black" @click="chatWith(item)">去沟通</text>
                                <text v-if="item.taskStatus === '5'" class="btn margin_left_16 btn-black" @click="deleteTask(item)">删除任务</text>
                            </div>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading } from 'weex-ui'
import { queryDist } from '@/api/common'
import { queryTaskList } from '@/api/home'
import { deleteMyPublish } from '@/api/market'
import Nat from 'natjs'
const modal = weex.requireModule('modal')

export default {
  name: 'taskOrder',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      tabList: [
        {
          type: 0,
          name: '求购平台'
        },
        {
          type: 1,
          name: '大师工坊'
        }
      ], // 类型列表
      typeIndex: 0, // 类型下标
      taskType: 0, // 任务状态
      allStatusList: ['未接单', '已接单', '任务中', '待收货', '已完成', '已过期', '任务超期'], // 状态列表
      statusList: ['全部', '已接单', '任务中', '已完成'], // 状态列表
      iconList: ['designer.png', 'printer.png', '', '', '', '', 'sam_garm_worker.png', 'fabric_dealer.png', 'excipient_dealer.png', 'swimsuit_factory.png', 'find_order.png', 'master.png'], // icon列表
      pageNo: 1,
      pageSize: 10,
      hasMore: true, // 是否还有数据
      itemList: [] // 数据列表
    }
  },
  created () {
    const that = this
    let value = that.$route.query.value
    if (value === 0) {
      that.taskType = value
    } else {
      that.taskType = value - 1
    }
  },
  mounted () {
    const that = this
    that.loadingShow = true
    that.$api.get(queryDist + 'service_type', {}, (result) => {
      that.loadingShow = false
      that.typeList = result.data
      that.getDataList()
    })
  },
  methods: {
    getDataList () { // 获取数据列表
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }
      if (that.taskType !== 0) {
        params.taskStatus = that.taskType === 3 ? 5 : that.taskType + 1
      }
      if (that.typeIndex === 0) {
        params.serviceType = [8, 9, 10, 11, 12]
      } else {
        params.serviceType = [1, 2, 7]
      }
      that.loadingShow = true
      that.$api.get(queryTaskList, params, (res) => {
        that.loadingShow = false
        if (res.data.records.length <= 0) {
          that.hasMore = false
          return
        }
        that.itemList = that.itemList.concat(res.data.records)
      }, () => {
        that.loadingShow = false
      }, true)
    },
    loadMore () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    chatWith (item) { // 去沟通
      Nat.call(item.userPhone)
    },
    deleteTask (item) {
      const that = this
      let params = []
      params.push(item.id)
      modal.confirm({
        message: '确定删除？',
        okTitle: '确定',
        cancelTitle: '取消'
      }, function (value) {
        if (value === '确定') {
          that.loadingShow = true
          that.$api.post(deleteMyPublish, params, () => {
            that.loadingShow = false
            modal.toast({
              message: '删除成功',
              duration: 0.8
            })
            that.pageNo = 1
            that.itemList = []
            that.getDataList()
            that.editing = false
          }, () => {
            that.loadingShow = false
          }, true)
        }
      })
    },
    handleFilterType (type) { // 类型格式化
      const that = this
      let str = ''
      that.typeList.forEach((item) => {
        if (item.value === type) {
          str = item.description
        }
      })
      return str
    },
    handleChooseType (inx) { // 切换类型
      const that = this
      if (that.typeIndex === inx) {
        return
      }
      that.typeIndex = inx
      that.taskType = 0
      that.pageNo = 1
      that.itemList = []
      that.getDataList()
    },
    handleChangeStatus (inx) { // 切换状态类型
      const that = this
      if (that.taskType === inx) {
        return
      }
      that.taskType = inx
      that.pageNo = 1
      that.itemList = []
      that.getDataList()
    },
    handleCheckDetail (item) {
      const that = this
      that.$router.push({
        path: '/mine/taskOrderDetail',
        query: {
          id: item.id,
          type: that.typeIndex,
          serviceType: item.serviceType,
          userId: true
        }
      })
    }
  },
  components: {
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .col_464646 {
        color: #464646;
    }
    .col_868686 {
        color: #868686;
    }
    .font_bold {
        font-weight: bold;
    }
    .text_right {
        width: 200px;
        text-align: right;
    }
    .border-bottom-ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .tab-wrapper {
        margin-top: 88px;
        flex-direction: row;
        background-color: #fff;
    }
    .tab-item-wrapper {
        flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .tab-item {
        line-height: 48px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 28px;
        font-weight: bold;
        box-sizing: content-box;
    }
    .first-child {
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: #ebebeb;
    }
    .unchoose {
        color: #868686;
        border-bottom-width: 0;
    }
    .choose {
        color: #fecb01;
        border-bottom-width: 4px;
        border-bottom-style: solid;
        border-bottom-color: #fecb01;
    }
    .taskstatus-wrapper {
        margin-top: 88px;
        justify-content: space-around;
    }
    .status-item {
        height: 88px;
        line-height: 88px;
        font-size: 28px;
    }
    .itemList {
        min-height: 500px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #ebebeb;
        background-color: #fff;
    }
    .itemCell {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }
    .itemIcon {
        width: 66px;
        height: 66px;
        margin-right: 24px;
    }
    .item-content {
        flex: 1;
    }
    .title-wrapper {
        justify-content: space-between;
        align-items: center;
    }
    .title {
        width: 410px;
        lines: 1;
        text-overflow: ellipsis;
        color: #464646;
        font-size: 28px;
    }
    .type {
        color: #cecece;
        font-size: 24px;
    }
    .item-center {
        justify-content: space-between;
    }
    .description-wrapper {
        flex: 1;
        /*width: 410px;*/
        margin-top: 16px;
        flex-wrap: wrap;
    }
    .description {
        /*width: 410px;*/
        lines: 2;
        color: #868686;
        font-size: 26px;
        line-height: 36px;
    }
    .status-wrapper {
        padding-top: 24px;
    }
    .status {
        font-size: 28px;
        color: #64C56B;
        text-align: right;
    }
    .time {
        margin-top: 12px;
        color: #ff0f37;
        font-size: 24px;
        text-align: right;
    }
    .tag-wrapper {
        margin-top: 24px;
    }
    .tag {
        height: 36px;
        margin-right: 16px;
        margin-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        color: #2b3040;
        font-size: 24px;
        border-radius: 10px;
    }
    .date-wrapper {
        margin-top: 24px;
        align-items: center;
        justify-content: space-between;
    }
    .date {
        color: #cecece;
        font-size: 24px;
        line-height: 40px;
    }
    .btn {
        width: 116px;
        height: 48px;
        font-size: 24px;
        line-height: 48px;
        text-align: center;
        border-radius: 10px;
    }
    .btn-white {
        color: #2b3040;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
    }
    .btn-black {
        color: #fff;
        border-width: 0px;
        background-color: #2b3040;
    }
    .margin_left_16 {
        margin-left: 16px;
    }
    .manage {
        width: 42px;
        height: 42px;
        margin-right: 72px;
    }
    .manage-content {
        flex: 1;
    }
</style>
